<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
             #jd,#xm,#tb{
                 width: 80%;
                 height: 200px;
                 border: 2px solid yellowgreen;
                 margin-bottom: 10px;
            }

             #jd{
                 background-color: pink;
             }
             #tb{
                 background-color: red;
             }
             #xm{
                 background-color: greenyellow;
             }

    </style>
</head>
<body>
<!--
        vue中的插槽的使用
           匿名插槽  默认插槽  <slot></slot>
          具名插槽            <slot name="tb"></slot>

-->
<div id="app">
   <navigation-link>

       <template #xm>
           <p style="font-size: 20px"> <a :href="url">{{name}}</a></p>
       </template>

       <template v-slot:tb>
           <p style="font-size: 20px"> <a href="http://www.taobao.com">淘宝</a></p>
       </template>

       <template v-slot:jd>
           <p style="font-size: 20px"> <a href="http://www.jd.com">京东</a></p>
       </template>

   </navigation-link>
</div>
<script>

    let  navigationLink  = {
        template:`
          <div>
             <h2>友情链接</h2>
             <div  id="tb">
                     <span>淘宝</span>
                      <slot name="tb"></slot>
             </div>

              <div id="xm">
                    <span>小米</span>
                     <slot name="xm"></slot>
             </div>

              <div id="jd">
                    <span>京东</span>
                     <slot name="jd"></slot>
             </div>

          </div>
        `
    }
    let vm = new Vue({
        el:'#app',
        data:{
            url:'http://www.mi.com',
            name:'小米'
        },
        methods:{},
        components:{
            'navigation-link':navigationLink
        }
      })

</script>
</body>
</html>